<template>
  <div class="centerSprite">
    <div id="header">
      <Header />
    </div>
    <div class="centerList">
      <HeaderSide />
      <div class="container">
        <p class="breadClum">
          <a href="" >新闻>></a>
          <a href="">实证热点</a>
        </p>
        <div class="spriteList">
          <p class="spriteTitle">
            中央精神
          </p>
          <ul class="spriteUl">
            <li>
              <router-link  :to="{path:'/article',query:{id:0}}">
                <a>
                潮起东方万象新——以习近平同志为核心的党中央团结带领全党全军全...
                 </a>
              </router-link>
              <span>[2018年10月18日]</span>
            </li>
            <li>
              <router-link  :to="{path:'/article',query:{id:0}}">
                <a>
                  潮起东方万象新——以习近平同志为核心的党中央团结带领全党全军全...
                </a>
              </router-link>
              <span>[2018年10月18日]</span>
            </li>
            <li>
              <router-link  :to="{path:'/article',query:{id:0}}">
                <a>
                  潮起东方万象新——以习近平同志为核心的党中央团结带领全党全军全...
                </a>
              </router-link>
              <span>[2018年10月18日]</span>
            </li>
            <li>
              <router-link  :to="{path:'/article',query:{id:0}}">
                <a>
                  潮起东方万象新——以习近平同志为核心的党中央团结带领全党全军全...
                </a>
              </router-link>
              <span>[2018年10月18日]</span>
            </li>
            <li>
              <router-link  :to="{path:'/article',query:{id:0}}">
                <a>
                  潮起东方万象新——以习近平同志为核心的党中央团结带领全党全军全...
                </a>
              </router-link>
              <span>[2018年10月18日]</span>
            </li>
            <li>
              <router-link  :to="{path:'/article',query:{id:0}}">
                <a>
                  潮起东方万象新——以习近平同志为核心的党中央团结带领全党全军全...
                </a>
              </router-link>
              <span>[2018年10月18日]</span>
            </li>
            <li>
              <router-link  :to="{path:'/article',query:{id:0}}">
                <a>
                  潮起东方万象新——以习近平同志为核心的党中央团结带领全党全军全...
                </a>
              </router-link>
              <span>[2018年10月18日]</span>
            </li>
          </ul>
        </div>
        <div class="pageContainer">
          <a class="current">
            1
          </a>
          <a >
            2
          </a>
          <a >
            3
          </a>
          <a >
            4
          </a>
          <a >
            5
          </a>
          <a >
            ...
          </a>
          <a href="">下一页</a>
          <a href="">尾页</a>

        </div>
      </div>
    </div>
    <div id="footer">
      <Footer />
    </div>
  </div>
</template>

<script>
  import header from  '../components/header.vue'
  import footer from '../components/footer.vue'
  import headerSide from '../components/side.vue'
  export default({
    data(){
      return {

      }
    },
    computed:{

    },
    components:{
      Header:header,
      Footer:footer,
      HeaderSide:headerSide
    }
  })
</script>
<style   >

  .breadClum a{
    font-size:16px;
    color:#6d6d6d;
  }
  .headerSide .container{
    overflow: hidden;
  }
  .centerList{
    background-image:url("../../static/images/list.jpg");
    background-position: 0 0;
    background-repeat: no-repeat;
    /*height: 1248px;*/
    /*margin-top: -156px;*/
  }
  /*.headerSide .container  ul{*/
    /*background: rgba(0,0,0,0.4) !important; ;*/
  /*}*/
  /*.headerSide .container ul li.first{*/
    /*font-size: 36px;*/
    /*color: red !important;*/
  /*}*/
  /*.headerSide .container ul li.first a{*/
    /*font-size: 36px;*/
  /*}*/
  .spriteList .spriteTitle{
    font-size: 28px;
    color: #ed4442;
    font-weight: bold;
    padding-top: 45px;
    padding-bottom: 20px;
  }
  .spriteUl  li{
    padding-bottom: 6px;
  }
  .spriteUl  li a{
    font-size: 16px;
    color: #000;
    position: relative;
    padding-left: 12px;
    display: inline-block;
    width: 828px;
    overflow: hidden;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
    line-height: 25px;

  }
  .spriteUl  li a:before{
    position: absolute;
    content: '';
    left: 2px;
    top:50%;
    width: 4px;
    height: 4px;
    background: #626262;
    margin-top: -2px;
  }
  .spriteUl  li  span{
    float: right;
    vertical-align: top;
  }
  .pageContainer{
    text-align: center;
    padding: 50px 0;
  }
  .pageContainer a{
    display: inline-block;
    padding: 5px 10px;
    font-size: 14px;
    color: #000;
    margin-right: 20px;
    border: 1px solid #cdccc9;
  }
  .pageContainer a.current{
    color: white;
    background: #fb565c;
    color: white;
    border: 1px solid #fb565c;

  }

</style>
